import React from 'react'
import { Row, Col, Button, Icon } from "antd";
import './index.less'
import Util from '../../utils/utils'
import Axois from '../../axios'
export default class Header extends React.Component {
  state = {}
  componentWillMount() {
    this.setState({
      userName: 'fjp203',
      href: 'http://ff.com'
    })
    setInterval(() => {
      let sysTime = Util.formateDate(new Date().getTime());
      this.setState({
        sysTime
      })
    }, 1000);
    this.getWeatherAPIData();
  }
  getWeatherAPIData() {
    let city = '西安';
    Axois.jsonp({
      url: 'https://api.map.baidu.com/telematics/v3/weather?output=json&ak=3p49MVra6urFRGOT9s8UBWr2&callback=getTodayWeather&location=' + encodeURIComponent(city)
    }).then((res) => {
      if (res.status === 'success') {
        let data = res.results[0].weather_data[0]
        this.setState({
          dayPictureUrl: data.dayPictureUrl,
          weather: data.weather

        })
      }
    })
  }
  render() {
    return (
      <div className="header">
        <Row className="header-top">
          <Col span={4}  className="menu-controll-button">
            <Button icon="menu-fold" type="primary"></Button>
          </Col>
          <Col span={20}>

            <span>欢迎,{this.state.userName}</span>
            <a href="{this.state.href}">退出</a>
          </Col>
        </Row>
        <Row className="breadcrumb">
          <Col span={4} className="breadcrumb-title">
            首页
             </Col>
          <Col span={20} className="weather">
            <span className="date">{this.state.sysTime}</span>
            <span className="weather-img">
              <img alt="logo" src={this.state.dayPictureUrl} />
            </span>
            <span className="weather-detail">
              {this.state.weather}
            </span>
          </Col>
        </Row>
      </div>
    )
  }
}